<template>
    <div class="invite" v-if="packetName">
        <page-title :title="packetName"></page-title>
        <!-- swiper 为多页邀请函而准备 -->
        <!-- <swiper class="iv-swiper" height="100%" ref="lsswiper"> -->
        <!-- <swiper-item class="swiper-item" v-for="(item, index) in content.inviteRelatedImg" :key="index" :style="{backgroundImage:'url('+item.url+')'}">
            </swiper-item> -->
        <!-- <swiper-item class="swiper-item-richctx"> -->
        <div class="personal">
            <h2>{{packetName}}</h2>
            <div class="rich-ctx" v-html="richCtx">
                <!-- 富文本编辑区域，自定义内容为HTML格式 -->
            </div>
            <div class="">
                <group class="little-form">
                    <x-switch class="bg-switch" :title="'是否有同行人员'" :disabled="status" :value-map="[0, 1]" v-model="invitationReceipt.has_follower"></x-switch>
                    <br v-if="invitationReceipt.has_follower==1">
                    <div class="form-item" v-if="invitationReceipt.has_follower==1">
                        <span class="form-item-label">
                            <span class="must">*</span>同行者姓名：</span>
                        <input type="text" :disabled="status" v-model="invitationReceipt.follower_name" :class="{'validate': vdPass}">
                    </div>
                    <div class="form-item" v-if="invitationReceipt.has_follower==1">
                        <span class="form-item-label">
                            <span class="must">*</span>同行者手机：</span>
                        <input type="tel" :disabled="status" v-model="invitationReceipt.follower_phone">
                    </div>
                    <div class="form-item" v-if="invitationReceipt.has_follower==1">
                        <span class="form-item-label">
                            <span class="must">*</span>同行者单位：</span>
                        <input type="text" :disabled="status" v-model="invitationReceipt.follower_company">
                    </div>
                </group>
                <group>
                    <x-switch class="bg-switch" :title="'是否有替代人员'" :disabled="status" :value-map="[0, 1]" v-model="invitationReceipt.has_replacer"></x-switch>
                </group>
                <group class="little-form">
                    <br v-if="invitationReceipt.has_replacer==1">
                    <div class="form-item" v-if="invitationReceipt.has_replacer==1">
                        <span class="form-item-label">
                            <span class="must">*</span>替代者姓名：</span>
                        <input type="text" :disabled="status" v-model="invitationReceipt.replacer_name" :class="{'validate': vdPass}">
                    </div>
                    <div class="form-item" v-if="invitationReceipt.has_replacer==1">
                        <span class="form-item-label">
                            <span class="must">*</span>替代者手机：</span>
                        <input type="tel" :disabled="status" v-model="invitationReceipt.replacer_phone">
                    </div>
                    <div class="form-item" v-if="invitationReceipt.has_replacer==1">
                        <span class="form-item-label">
                            <span class="must">*</span>替代者单位：</span>
                        <input type="text" :disabled="status" v-model="invitationReceipt.replacer_company">
                    </div>
                </group>
            </div>
            <div class="form-item two-line invite-bz">
                <span class="form-item-label">
                    备注：</span>
                <x-textarea :max="100" :placeholder="'请输入你想说的话'" :rows="3" v-model="invitationReceipt.remarks"></x-textarea>
            </div>
            <flexbox class="invite-btn">
                <flexbox-item>
                    <x-button v-if="status==false" :show-loading="showLoading" type="warn" @click.native="subRefuse">拒绝</x-button>
                </flexbox-item>
                <flexbox-item>
                    <x-button v-if="status==false" :show-loading="showLoading" type="primary" @click.native="subAgree">同意邀请</x-button>
                </flexbox-item>
            </flexbox>
            <p class="text2" v-if="invitationReceipt.accept==0">您已拒绝邀请</p>
            <p class="text1" v-if="invitationReceipt.accept==1">您已同意邀请</p>
        </div>
        <!-- </swiper-item>
        </swiper> -->
    </div>
</template>

<script>
import { getInvitationById, saveInvivationReceipt, getReceiptByInvIdAndUserId } from '@/api/activity'
import { getPacketById } from '@/api/packet'
import { Swiper, SwiperItem, Flexbox, FlexboxItem, XButton, XTextarea, XSwitch, Group } from 'vux'
export default {
    data() {
        return {
            //活动id
            activityId: null,
            //邀请函id
            invitationId: this.$route.query.id,
            //微信openid
            openId: this.$route.query.openid,
            //获取企业id
            eid: this.$route.query.eid,
            //获取微信id
            wxid: this.$route.query.wxid,
            richCtx: '',
            content: {},
            vdPass: true,
            invitationReceipt: {
                //是否接受邀请( 0.否 1.是 )
                accept: '',
                has_follower: 0,
                follower_name: '',
                follower_phone: '',
                follower_company: '',
                has_replacer: 0,
                replacer_name: '',
                replacer_phone: '',
                replacer_company: '',
                remarks: ''
            },
            //按钮状态
            status: null,
            //提交的菊花
            showLoading: false,
            //资料包名称
            packetName: null,
        }
    },
    components: {
        Swiper,
        SwiperItem,
        Flexbox,
        FlexboxItem,
        XButton,
        XSwitch,
        Group,
        XTextarea
    },
    mounted() {
    },
    methods: {
        // 同意
        subAgree() {
            var This = this
            this.$vux.confirm.show({
                title: '确认信息',
                content: '您确定同意邀请?',
                onConfirm() {
                    This.invitationReceipt.accept = 1
                    This.showLoading = true
                    saveInvivationReceipt(This.eid, This.invitationId, This.activityId, JSON.stringify(This.invitationReceipt)).then(res => {
                        console.log("保存成功")
                        This.status = true
                        This.showLoading = false
                        This.$vux.toast.show('操作成功')
                    }).catch(_ => {
                        console.log("接受邀请报错")
                        This.showLoading = false
                    })
                }
            })
        },
        // 拒绝
        subRefuse() {
            var This = this
            this.$vux.alert.show({
                title: '确认信息',
                content: '您确定拒绝邀请吗，请三思而后行！',
                onHide() {
                    This.invitationReceipt.accept = 0
                    This.showLoading = true
                    saveInvivationReceipt(This.eid, This.invitationId, This.activityId, JSON.stringify(This.invitationReceipt)).then(res => {
                        console.log("保存成功")
                        This.status = true
                        This.showLoading = false
                        This.$vux.toast.show('操作成功')
                    }).catch(_ => {
                        console.log("拒绝邀请报错")
                        This.showLoading = false
                    })
                }
            })
        }
    },
    created() {
        this.hideWXOptionMenu()
        getInvitationById(this.invitationId).then(res => {
            // if (res.noBind) {
            //     this.$vux.toast.show(res.msg)
            //     setTimeout(() => {
            //         WeixinJSBridge.call('closeWindow')
            //     }, 1000)
            // } else {
            if (res.receipt) {
                this.status = true
                this.invitationReceipt = res.receipt
            } else {
                this.status = false
                this.invitationReceipt.accept = 2
            }
            this.activityId = res.invitation.activity_id
            getPacketById(res.invitation.packet_id).then(resp => {
                this.richCtx = resp.packet.rich_ctx
                this.content = resp.packet.content
                this.packetName = resp.packet.title
            }).catch(_ => {
                console.log("获取资料包报错")
            })
            // }
        }).catch(_ => {

        })
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss"  scoped>
.text1 {
  text-align: center;
  color: green;
}
.text2 {
  text-align: center;
  color: red;
}
</style>
